<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>动态表单</title>
    <style>
      .show-grid{margin-bottom:15px}
    </style>
  </head>
  <body>

  <div  class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div id="form_info"></div>
      </div>
    </div>

  </div>

    <script src="misc/js/vue.min.2.3.js"></script>
    <script src="misc/js/requirejs/2.1.18/require.min.js"></script>
    <script src="misc/js/plugin/config.js"></script>
<script>
  require(['dist/formbuilder'],function (FormObject) {

      var globalObj=new Vue({
          el: '#form_info',
          template:'<FormObject :inputDefine="inputDefine" :formData="formData" :isRoot="true" @submit="onSubmit"></FormObject>',
          components:{
              "FormObject":FormObject
          },
          data(){
              return{
                  inputDefine:{
                      key:"vue_root_el",name:"vue_root_el",displayName:"root节点", elementType:"formObject",defValue:{},
                      inputDefines:[
                          {key:"key1",name:"key1",displayName:"第一个key", elementType:"input",defValue:"2121"},
                          {key:"key2",name:"key2",displayName:"第2个key", elementType:"textarea",defValue:"gfgfrg"},
                          {key:"key3",name:"key3",displayName:"第3个key", elementType:"radio",defValue:"",
                              options:[{"displayName":"值1","value":"1"},
                                  {"displayName":"值2","value":"2"},
                                  {"displayName":"值3","value":"3"}]},
                          {key:"key4",name:"key4",displayName:"第4个key", elementType:"checkbox",defValue:"",
                              options:[{"displayName":"值1","value":"1"},
                                  {"displayName":"值2","value":"2"},
                                  {"displayName":"值3","value":"3"}]},
                          {key:"key5",name:"key5",displayName:"第5个key", elementType:"select",defValue:"",
                              options:[{"displayName":"值1","value":"1"},
                                  {"displayName":"值2","value":"2"},
                                  {"displayName":"值3","value":"3"}]},
                          {key:"subForm",name:"subForm",displayName:"一个form", elementType:"formObject",defValue:{},
                              inputDefines:[
                                  {key:"key_sub1",name:"key_sub1",displayName:"子key1", elementType:"input",defValue:"键盘"},
                                  {key:"key_sub2",name:"key_sub2",displayName:"子key2", elementType:"input",defValue:"鼠标"}
                              ]
                          }
                      ]
                  },
                  formData:{}
              }
          },
          methods:{
              "dataChange":function (dataInfo) {
                  this.formData=dataInfo['newValue'];
                  console.log("root change");
                  console.log(this.formData);
              },
              "onSubmit":function (formData) {
                  console.log(formData);
              }
          }
      })

  });


</script>

  </body>
  <link rel="stylesheet"  href="misc/css/bootstrap.min.css">
  <link rel="stylesheet"  href="misc/css/bootstrap-theme.min.css">

</html>
